<template>
  <div class="goods-image">
    <!-- 大图 -->
    <div
        class="large"
        v-show="showFlag"
        :style="[
        {
          backgroundImage: `url(${images[curIndex]})`,
          backgroundPositionX: positionX + 'px',
          backgroundPositionY: positionY + 'px',
        }]"
    ></div>

    <div class="middle"
         ref="target"
         @mouseover="enterHandler"
         @mousemove ="moveHandler"
         @mouseout="outHandler"
    >
      <img :src="images[curIndex]" alt="" />
      <!-- 蒙层容器 -->
      <div
          class="layer"
          :style="{ left: left + 'px', top: top + 'px' }"
          v-show="showFlag"
      ></div>
    </div>
    <!-- 小图 -->
    <ul class="small">
      <li
          v-for="(img, i) in images"
          :key="i"
          @mouseenter="mouseEnterFn(i)"
          :class="{ active: i == curIndex }"
      >
        <img :src="img" alt="" />
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: "PartImage",
  data(){
    return{
      curIndex:0,
      showFlag:false,
      positionX:0,
      positionY:0,
      top:0,
      left:0,
    }
  },
  props:["images"],
  methods: {
    // 鼠标进入原图空间函数
    enterHandler() {
      this.showFlag = true;
    },
    // 鼠标移动函数
    moveHandler(event) {
      event.currentTarget  //获取当前dom元素后可进行操作
      //获取元素距离视口高度
      var top1 = event.currentTarget.getBoundingClientRect().top
      var top2 = event.currentTarget.getBoundingClientRect().left
      //相加即为元素实际顶部距离
      let x = event.clientX-100-top2<0? 0 : event.clientX-100-top2
      let y = event.clientY-100-top1<0?0:event.clientY-100-top1

      if(x>=200){
        x=200
      }
      if(y>=200){
        y=200
      }

      this.left = x
      this.top=y

      this.positionX = - x*2
      this.positionY = - y*2
    },
    // 鼠标移出函数
    outHandler() {
      // 控制层罩与放大空间的隐藏
      this.showFlag = false;
    },
    mouseEnterFn(i) {
      this.curIndex = i;
    },
  }
}
</script>

<style scoped lang="scss">
.goods-image {
  width: 480px;
  height: 400px;
  position: relative;
  display: flex;
  .middle {
    width: 400px;
    height: 400px;
    background: #f5f5f5;
  }
  .large {
    position: absolute;
    top: 0;
    left: 412px;
    width: 400px;
    height: 400px;
    z-index: 500;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    // 背景图:盒子的大小 = 2:1  将来控制背景图的移动来实现放大的效果查看 background-position
    background-size: 800px 800px;
    background-color: #f8f8f8;
  }
  .layer {
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.2);
    // 绝对定位 然后跟随咱们鼠标控制left和top属性就可以让滑块移动起来
    left: 0;
    top: 0;
    position: absolute;
  }
  .small {
    width: 80px;
    li {
      width: 68px;
      height: 68px;
      margin-left: 12px;
      margin-bottom: 15px;
      cursor: pointer;
    }
    li.active{
      border: 2px solid #27ba9b;
    }
  }
  img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
  }
}
</style>